<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疫苗查询</title>
    <link rel="stylesheet" href="../styles.css">
    <link rel="stylesheet" href="vaccine.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <button class="back-btn" onclick="window.location.href='/demo/index/index.html'">
                <i class="fas fa-arrow-left"></i>
            </button>
            </div>
            <h1>疫苗查询</h1>
        </div>

        <!-- 疫苗信息卡片 -->
        <div class="vaccine-container">
            <!-- 疫苗接种记录 -->
            <div class="vaccine-records">
                <div class="vaccine-card">
                    <div class="vaccine-header">
                        <h3>新冠疫苗</h3>
                        <span class="vaccine-status completed">已完成</span>
                    </div>
                    <div class="vaccine-details">
                        <div class="dose">
                            <span class="dose-number">第一剂</span>
                            <span class="dose-date">2023-06-15</span>
                            <span class="dose-manufacturer">科兴生物</span>
                        </div>
                        <div class="dose">
                            <span class="dose-number">第二剂</span>
                            <span class="dose-date">2023-07-15</span>
                            <span class="dose-manufacturer">科兴生物</span>
                        </div>
                        <div class="dose">
                            <span class="dose-number">第三剂</span>
                            <span class="dose-date">2024-01-15</span>
                            <span class="dose-manufacturer">科兴生物</span>
                        </div>
                    </div>
                </div>

                <div class="vaccine-card">
                    <div class="vaccine-header">
                        <h3>流感疫苗</h3>
                        <span class="vaccine-status upcoming">待接种</span>
                    </div>
                    <div class="vaccine-details">
                        <div class="dose">
                            <span class="dose-number">年度接种</span>
                            <span class="dose-date">预约时间：2024-04-20</span>
                        </div>
                    </div>
                </div>

                <div class="vaccine-card">
                    <div class="vaccine-header">
                        <h3>乙肝疫苗</h3>
                        <span class="vaccine-status completed">已完成</span>
                    </div>
                    <div class="vaccine-details">
                        <div class="dose">
                            <span class="dose-number">第一剂</span>
                            <span class="dose-date">2023-03-10</span>
                            <span class="dose-manufacturer">默沙东</span>
                        </div>
                        <div class="dose">
                            <span class="dose-number">第二剂</span>
                            <span class="dose-date">2023-04-10</span>
                            <span class="dose-manufacturer">默沙东</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 接种建议 -->
            <div class="vaccine-tips">
                <h3>接种建议</h3>
                <ul>
                    <li>
                        <i class="fas fa-check-circle"></i>
                        <span>请按时完成疫苗接种，保护自己和他人</span>
                    </li>
                    <li>
                        <i class="fas fa-exclamation-circle"></i>
                        <span>接种前请确保身体状况良好</span>
                    </li>
                    <li>
                        <i class="fas fa-clock"></i>
                        <span>接种后请在留观区观察30分钟</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <div class="nav-item" onclick="window.location.href='/demo/index/index.html'">
                <i class="fas fa-hospital"></i>
                <span>医疗</span>
            </div>
            <div class="nav-item" onclick="window.location.href='../knowledge.html'">
                <i class="fas fa-book-medical"></i>
                <span>知识</span>
            </div>
            <div class="nav-item" onclick="window.location.href='../records.html'">
                <i class="fas fa-heart"></i>
                <span>档案</span>
            </div>
            <div class="nav-item" onclick="window.location.href='../profile/profile.html'">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </nav>
    </div>
    <script src="vaccine.js"></script>
</body>
</html> 